<template>
  <view>
    <view class="page">
      <view class="title">管理员首页</view>
      <view class="data-display">
        <view class="inline-text">累计活跃用户</view>
        <view class="data">{{ userNumber }}</view>
      </view>
      <view class="data-display">
        <view class="inline-text">持续更新相册</view>
        <view class="data">{{ albumNumber }}</view>
      </view>
      <view class="data-display">
        <view class="inline-text">累计图片</view>
        <view class="data">{{ picNumber }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userNumber: 0,
      albumNumber: 0,
      picNumber: 0,
    };
  },
  methods: {
    getSumData: function () {
      this.$http.post(this.$api.admin, { option: "showSum" }).then((res) => {
        // console.log(res);
        this.userNumber = res.data.userSum;
        this.albumNumber = res.data.albumSum;
        this.picNumber = res.data.pictureSum;
      });
    },
  },
  onLoad: function () {
    this.getSumData();
  },
};
</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime&family=Noto+Serif+SC:wght@500&family=Oswald&display=swap");
.page {
  max-width: 1200px;
  margin: 75px auto;
  background-color: white;
  height: 100%;
  box-shadow: 0 0 20px rgb(48, 98, 48);
}
.to-right {
  text-align: right;
}
.inline-text {
  font-size: 20px;
}
.data-display {
  padding: 20px 40px;
}
.data {
  font-family: "Oswald";
  font-size: 80px;
  padding: 0 20px;
}
.title {
  padding: 20px;
  font-size: 40px;
}
</style>